<template>
  <div class="article">
    <div class="wrapper-content">
      <h3>多边形</h3>
      <div class="article-content" ref="oneRef">
        <canvas id="one"></canvas>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { fabric } from 'fabric'; // 引入 fabric

const one:any = ref(null);
const oneRef:any = ref(null);

const initOne = () => {
  one.value = new fabric.Canvas('one', {
    width: oneRef.value?.clientWidth,
    height: oneRef.value?.clientHeight
  });

  // 多边形
  let polygon = new fabric.Polygon([
    {x: 30, y: 30},
    {x: 150, y: 100},
    {x: 80, y: 100},
    {x: 100, y: 30}
  ], {
    fill: '#ffd3b6', // 填充色
    stroke: '#6639a6', // 线段颜色：紫色
    strokeWidth: 5 // 线段粗细 5
  })

  // 将元素添加到画布中
  one.value.add(polygon);

  selectAll(one.value);
  disSelectAll(one.value);
}

// 全选
const selectAll = (canvas: any) => {
  canvas.discardActiveObject();
  var sel = new fabric.ActiveSelection(canvas.getObjects(), {
    canvas: canvas,
  });
  canvas.setActiveObject(sel);
  canvas.requestRenderAll();
}

// 取消全选
const disSelectAll = (canvas: any) => {
  canvas.discardActiveObject();
  canvas.requestRenderAll();
}

nextTick(()=>{
  initOne();
})
</script>

<style lang="scss" scoped>
.article {
  h3{
    font-size: var(--rem-15);
    padding: var(--rem-20) var(--rem-20) 0;
    font-weight: 600;
  }
  .article-content{
    min-height: var(--rem-500);
    background: #C44D58;
    background-color: #212121;
    margin: var(--rem-20);
    color: azure;
    #one{
      width: 100%;
      height: var(--rem-500);
    }
  }
}

</style>
